<template>
    <div class="flexbox flexcolumn height_100" v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
        <AddProUser :addForm="addForm" @setSessionStorage="setSessionStorage" ref="add_user" />
        <div class="flex over_box">
            <el-form label-position='left' label-width="100px" size="small" :model="addForm" :hide-required-asterisk='true' ref="addForm" :rules="addRules" class="add_form">
                <BaseInfo :addForm="addForm" :scenceList="scenceList" @setSessionStorage="setSessionStorage"/>
                <div class="com_box pd_box">
                    <div class="com_tab_content flexbox flexcenter flexbetween">
                        <div class="com_tab_box flexbox flexcenter">
                            <div class="com_tab_item" :class="{'active':active==1}" @click="selectTab(1)">一阶测试设置</div>
                            <div class="com_tab_item" :class="{'active':active==2}" @click="selectTab(2)">二阶测试设置</div>
                        </div>
                    </div>
                    <FirstPhase :addForm="addForm" :delType="delType" :opmList="opmList" @addProUser="addProUser" @setSessionStorage="setSessionStorage" v-if="active==1" key="first"/>
                    <SecondPhase :addForm="addForm" :delType="delType" :opmList="opmList" @addProUser="addProUser" @setSessionStorage="setSessionStorage" v-else-if="active==2" key="second"/>
                </div>
            </el-form>
        </div>
        <div class="project_footer com_box flexbox flexcenter">
            <el-button type="primary" class="el-button-width" size="small" @click="submitForm('addForm')" :loading="disabled" :disabled='disabled'>保存</el-button>
            <el-button class="el-button-width" size="small" plain @click="$router.go(-1)">返回</el-button>
        </div>
    </div>
</template>

<script>
import AddProUser from "./AddProUser";
import FirstPhase from './FirstPhase'
import SecondPhase from './SecondPhase'
import BaseInfo from "./BaseInfo"
export default {
    components: {
        AddProUser,
        FirstPhase,
        SecondPhase,
        BaseInfo
    },
    name: "",
    data() {
        return {
            active:1,
            loading: false,
            disabled: false,
            scenceList:[],//场景列表
            userList: [],//广告主列表
            opmList: [],//优化师列表
            delType:[
                {
                    del_type:1,
                    name:"专业计划"
                },
                {
                    del_type:2,
                    name:"放量计划"
                },
                {
                    del_type:3,
                    name:"所有计划"
                },
            ],
            addForm: {
                name:"",
                sid:[],
                one:{
                    types:1,
                    advertiser_id:[],
                    user_id:[""],
                    score:[
                        {
                            stage:1,
                            cost:"",
                            roi:"",
                        },
                        {
                            stage:-1,
                            cost:"",
                            roi:"",
                        },
                    ],
                    repeat:[
                        {
                            day:"",
                            recentlyday:"",
                            cost:"",
                            roi:"",
                        }
                    ],
                    del:[
                        {
                            cost:"",
                            roi:"",
                            recentlyday:"",
                            del_type:1,
                            create_day:"",
                        }
                    ],
                    protect:[]
                },
                two:{
                    types:2,
                    advertiser_id:[],
                    user_id:[""],
                    score:[
                        {
                            stage:1,
                            cost:"",
                            roi:"",
                        },
                        {
                            stage:2,
                            cost:"",
                            roi:"",
                        },
                        {
                            stage:-1,
                            cost:"",
                            roi:"",
                        },
                    ],
                    repeat:[
                        {
                            day:"",
                            recentlyday:"",
                            cost:"",
                            roi:"",
                        }
                    ],
                    del:[
                        {
                            cost:"",
                            roi:"",
                            recentlyday:"",
                            del_type:1,
                            create_day:"",
                        }
                    ],
                    protect:[
                        {
                            day:""
                        }
                    ]
                }
            },
            addRules: {
                checkFloat: [
                    {
                        pattern:
                            /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/,
                        // required: true,
                        message: "请输入正确数值",
                        trigger: ["blur", "change"],
                    },
                ],
            },
        };
    },
    created() {
        let aobj = JSON.parse(window.sessionStorage.getItem("addVideoProject"));
        if (aobj) {
            this.addForm = aobj;
        }
        this.getUserList();
        this.getScenceList()
    },
    beforeDestroy() {
        window.sessionStorage.removeItem("addVideoProject");
    },
    methods: {
        selectTab(type){
            this.active = type
        },
        //获取场景
        async getScenceList() {
            const { data: res } = await this.$http.post(
                "videotest/Probject/sceneProListV5"
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.scenceList = res.data;
            }
        },


        //获取优化师
        async getUserList() {
            const { data: res } = await this.$http.post(
                "videotest/Probject/szOptimizerList"
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.opmList = res.data;
            }
        },

        addProUser(type) {
            this.$refs.add_user.getData(type);
        },

        // 提交添加
        submitForm(formName) {
            this.$refs[formName].validate(async (valid) => {
                if (valid) {
                    let set = []
                    let one = JSON.parse(JSON.stringify(this.addForm.one));
                    let two = JSON.parse(JSON.stringify(this.addForm.two));
                    one.advertiser_id = one.advertiser_id.map(item=>{return item.advertiser_id})
                    two.advertiser_id = two.advertiser_id.map(item=>{return item.advertiser_id})
                    set.push(one)
                    set.push(two)
                    let subForm = {
                        name:this.addForm.name,
                        sid:this.addForm.sid,
                        set:set
                    }
                    this.disabled = true;
                    const { data: res } = await this.$http.post(
                        "videotest/Probject/createPro",
                        subForm
                    );
                    if (res.code !== 200) {
                        this.$message.error(res.msg);
                        this.disabled = false;
                        return;
                    } else {
                        this.$message({
                            message: "保存成功！",
                            type: "success",
                        });
                        this.disabled = false;
                        this.$router.go(-1);
                    }
                } else {
                    this.disabled = false;
                    return false;
                }
            });
        },

        // 缓存
        setSessionStorage() {
            window.sessionStorage.setItem(
                "addVideoProject",
                JSON.stringify(this.addForm)
            );
        },
    },
};
</script>


<style scoped>
.com_tab_content {
    padding: 0;
    border: 0;
    margin-bottom: 16px;
}
.project_footer {
    padding: 0 20px;
    height: 72px;
}
.pd_box {
    padding: 0 20px;
    overflow: hidden;
    margin-bottom: 12px;
}
.pro_title {
    font-weight: bold;
    font-size: 16px;
    height: 56px;
    line-height: 56px;
}
/deep/ .add_form .el-form-item__label {
    color: #616c85 !important;
}
/deep/ .add_form .el-form-item__label {
    line-height: 16px !important;
    margin-top: 7px;
}

</style>

<style>
.brand_select .el-select-dropdown__item {
    height: auto;
    line-height: unset;
    padding-top: 8px;
    padding-bottom: 8px;
}
</style>

